<template>
  <div class="expressinfo">
    <div class="title">
      <div>{{title}}</div>
      <div>更多>></div>
    </div>
    <div class="conent">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr class="head" ref="head">
          <th>托运单位</th>
          <th>状态</th>
          <th>货物类型</th>
          <th style="width: 70px">货物明细</th>
        </tr>
        <tr class="row">
          <td>Peter</td>
          <td class="status">
            <div>运</div>
            <div>输</div>
            <div>中</div>
          </td>
          <td>Griffin</td>
          <td>查看详情</td>
        </tr>
        <tr class="row dom">
          <td>Peter</td>
          <td class="status">
            <div>运</div>
            <div>输</div>
            <div>中</div>
          </td>
          <td>Griffin</td>
          <td>查看详情</td>
        </tr>
        <tr class="row">
          <td>Peter</td>
          <td class="status">
            <div>运</div>
            <div>输</div>
            <div>中</div>
          </td>
          <td>Griffin</td>
          <td>查看详情</td>
        </tr>
        <tr class="row dom">
          <td>Peter</td>
          <td class="status">
            <div>运</div>
            <div>输</div>
            <div>中</div>
          </td>
          <td>Griffin</td>
          <td>查看详情</td>
        </tr>

      </table>
    </div>
    <div class='left'>
      <img src="../../assets/images/left.png" alt="">
    </div>
    <div class='left-down'>
      <img src="../../assets/images/left_down.png" alt="">
    </div>
    <div class='right'>
      <img src="../../assets/images/right.png" alt="">
    </div>
    <div class='right-down'>
      <img src="../../assets/images/right_down.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title'],
    name: "expressinfo",
    data() {
      return {}
    }
  }
</script>

<style scoped lang="scss">
  .expressinfo {
    height: 254px;
    margin-top: 20px;
    box-sizing: border-box;
    border: 1px solid #1B4B98;
    -webkit-box-shadow: inset 0 0 10px #1B4B98;
    -moz-box-shadow: inset 0 0 10px #1B4B98;
    box-shadow: inset 0 0 10px #1B4B98;
    position: relative;
    .title {
      height: 50px;
      line-height: 50px;
      background: #0A193B;
      padding: 0 10px;
      color: #6082A7;
      box-shadow: inset 6px 0 10px -5px rgba(27, 75, 152, .6), inset -6px 0 10px -5px rgba(27, 75, 152, .6);
      div {
        font-size: 14px;
        float: left;
      }
      .tit-btn {
        position: relative;
        height: 30px;
        line-height: 30px;
        padding: 0 8px;
        margin-top: 5px;
        color: #00c0ff;
        border: 1px solid #1B4B98;
        cursor: pointer;
        .left {
          width: 9px;
          height: 9px;
          position: absolute;
          top: 0px;
          left: 0px;
        }
        .left-down {
          width: 9px;
          height: 9px;
          position: absolute;
          bottom: 0px;
          left: 0px;
        }
        .right-down {
          width: 9px;
          height: 9px;
          position: absolute;
          bottom: 0px;
          right: 0px;
        }
        .right {
          width: 9px;
          height: 9px;
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      div:last-child {
        float: right;
      }
    }
    .conent {
      position: relative;
      table {
        width: 100%;
        background: red;
        .head {
          th {
            color: #6284A9;
            background: #0A0919;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            text-align: left;
          }
        }
        .row {
          border: none;
          td {
            color: #6284A9;
            background: #091737;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            text-align: left;
          }
          .status {
            div {
              float: left;
              box-sizing: border-box;
              text-align: center;
              color: #fff;
              height: 30px;
              line-height: 30px;
              width: 20px;
              margin-right: 2px;
              background: url("../../../static/bg.png") no-repeat center;
              background-size: cover;
            }
          }
          td:last-child {
            cursor: pointer;
            color: #1B4B98;
          }

        }

      }

    }
    .left {
      position: absolute;
      top: -5px;
      left: 0px;
    }
    .left-down {
      position: absolute;
      bottom: -2px;
      left: 0px;
    }
    .right-down {
      position: absolute;
      bottom: -2px;
      right: 0px;
    }
    .right {
      position: absolute;
      top: -2px;
      right: 0px;
    }
    .dom {
      td {
        background: #0A0919 !important;
      }
    }
  }
</style>
